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Problem 


The goal is that we have an ellipse, and want to render a nice smooth edge 
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Problem 



For proper AA, want to compute coverage of ellipse on each pixel. (We could use MSAA, but let’s assume it’s too slow or poorly supported) 
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Problem 



Could use an implicit function. Positive means outside the ellipse, negative inside, 0 on the edge. But that just tells us if the pixel center is in or out, not 
coverage. 
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Problem 
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Can use (1/2 - signed distance) from edge to center of pixel, clamped between 0 and 1, to approximate coverage. Problem — general distance from 
ellipse is an intractable problem. 
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One solution 



Signed distance to a circle (at origin) is easy to compute 
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One solution 


So write a shader that renders a circle in a quad 
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One solution 



And stretch and squash the quad to get an ellipse. This is effectively the same as rendering a square quad with a non-uniform scale transformation. 


CA AlE 0£VELQP£RS COKf £R£HC£ * 2015 


MAACH 2 8, 2015 CDCONFCOM 


One (bad) solution 



The problem is that then you end up with blurred edges in the stretched direction, and overly sharp edges in the shrunken direction. Here I’m using a unit 
circle, so everything is blurred. 


CA AlE 0£VELQP£RS COKf £R£HC£ * 2015 


One (bad) solution 



If we take some isodistance curves, we can see what’s going on. 
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One (bad) solution 



After we squash/stretch our quad, we end up non-uniformly scaling our distance values as well. 
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Better solution 



What we’d like to do is apply the inverse of the transformation to the distance curves, to correct for this. But what would we apply our transformation to? 
We don’t have a vector to transform. 
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Better solution 
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However, there is an approximation to the distance for any implicit function (via Gabriel Taubin), which is to divide the function value by the length of the 
gradient at that point. This approximation is only good within a distance of about 1 - but that’s okay, because that’s all we need to measure with some 
accuracy. Beyond that, we know that a pixel is either all in or all out. 
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Better solution 
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If we have a transformation T, we can transform the gradient by the inverse to get a corrected distance. 
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Better solution 
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For non-affine transformations, we can’t get a general inverse across the entire quad, so we can compute the Jacobian at each point (using the shader 
differential operators). 
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Better solution 
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So for our ellipse or general circles, it looks like this. This is the formula for a unit circle. We apply a transformation to it to stretch into whatever circle 
ellipse we want. 


CA Hi 0£VELQP£RS COKf £R£HC£ * 2015 


MAACH 2 8, 2015 CDCONFCOM 


Better solution 



And we can use this to get all sorts of ellipses 
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Extensions 




Can use this trick for any implicit function. Can use it for space curves (see Loop-Blinn) 
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Extensions 


Hamburgefons 


Implicit function can also be stored in a texture, i.e. distance field (see Valve). Note: all of the shaders I’ve seen do the correction improperly. See Skia code 
for correct antialiasing. 
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The End 

jim@essentialmath.com 
Twitter: @cthulhim 
G+: vintagejim 


We’re hiring! 


